<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态属性</title>
    <!-- 导入vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
</head>
<body>
    <!-- 
    1. 生成索引
        Math.random() -> Math.ceil()/Math.floor()
    2. 定义数组
    3. 快速改变索引
        setInterval()
    4. 将数组的元素放入页面
        {{}} 
    5. 点击按钮暂停
    -->
    <div id="app">
        {{student_name}}
        <button @click='stop'>暂停</button>{{flag}}
    </div>
    <script>
        new Vue({  
            // 将vue实例与容器进行绑定
            el:'#app',
            // data中的变量可以直接在容器中使用
            data(){
                return {
                    student:['刘宇航','余乐','杨超','贺帅','苏悦'],
                    student_name:'',
                    id:0,
                    flag:true
                }
            },
            // 在页面加载完毕之后立即调用某个方法
            created() {
                this.get_name()
            },
            methods:{
                // 获取学生姓名
                get_name() {
                    this.id = setInterval(()=>{
                        var index = Math.floor(Math.random()*5);
                        this.student_name = this.student[index];
                    },20)
                },
                // 暂停/启动定时器
                stop() {
                    if(this.flag) {
                        // 清空定时器
                        clearInterval(this.id);
                        this.flag = false;
                    } else {
                        this.get_name();
                        this.flag = true;
                    }
                }
            }
        })
    </script>
</body>
</html>